<template>
  <div class="review-filter">
    <el-form :inline="true" :model="query" class="filter-form">
      <el-form-item label="订单编号：">
        <el-input v-model="query.orderNo" placeholder="请输入订单号" clearable />
      </el-form-item>
      <el-form-item label="配送员：">
        <el-input v-model="query.riderName" placeholder="请输入配送员姓名" clearable />
      </el-form-item>
      <el-form-item label="名称：">
        <el-input v-model="query.userOrMerchantName" placeholder="请输入顾客/商家名称" clearable />
      </el-form-item>
      <el-form-item label="评价内容：">
        <el-input v-model="query.keyword" placeholder="请输入评价关键词" clearable />
      </el-form-item>
      <!-- ★ 评价时间：7 个选项 -->
      <el-form-item label="评价时间：">
        <el-select v-model="query.timeRange" placeholder="请选择" style="width: 180px">
          <el-option label="全部"        value="all" />
          <el-option label="本月内"      value="month" />
          <el-option label="近三个月"    value="3m" />
          <el-option label="今年内"      value="year" />
          <el-option label="2024年"     value="2024" />
          <el-option label="2023年"     value="2023" />
          <el-option label="2023年以前"  value="before2023" />
        </el-select>
      </el-form-item>
      
    </el-form>

    <div class="filter-row">
      <span>评价星级：</span>
      <el-button-group>
        <el-button
          v-for="star in stars"
          :key="star.value"
          :type="query.star === star.value ? 'primary' : 'default'"
          @click="query.star = star.value"
        >{{ star.label }}</el-button>
      </el-button-group>
      <span style="margin-left: 24px;">评价角色：</span>
      <el-button-group>
        <el-button :type="query.fromRole === 1 ? 'primary' : 'default'"
          @click="query.fromRole = 1">买家</el-button>
        <el-button :type="query.fromRole === 2 ? 'primary' : 'default'"
          @click="query.fromRole = 2">商家</el-button>
      </el-button-group>
    
    
<el-form-item>
        <el-button type="primary" @click="onSearch">搜索</el-button>
        <el-button @click="onReset">清除条件</el-button>
      </el-form-item>
    </div>
    <!-- 分页 -->
<el-pagination
  v-model:current-page="pageNum"
  v-model:page-size="pageSize"
  :total="total"
  background
  layout="total, sizes, prev, pager, next, jumper"
  @size-change="handleSizeChange"
  @current-change="handleCurrentChange"
/>
  </div>
</template>

<script setup name="OrderReview">
import { reactive, ref, onMounted } from 'vue'
import {getReviewList} from  '@/api/order'
// 评价管理页面逻辑
const loading = ref(false)
const tableData = ref([])
const total = ref(0)
const pageNum = ref(1)
const pageSize = ref(10)
const pageParams = reactive({
  pageNum: 1,
  pageSize: 10
})



const query = reactive({
  orderNo: '',
  riderName: '',
  userOrMerchantName: '',
  keyword: '',
  timeRange: 'all',
  star: '',
  fromRole: 1   // 1=买家 2=商家
})

const stars = [
  { label: '五星', value: 5 },
  { label: '四星', value: 4 },
  { label: '三星', value: 3 },
  { label: '二星', value: 2 },
  { label: '一星', value: 1 }
]

function onSearch() {
  // 这里发起查询请求
  console.log('查询参数', query.value)
}

function onReset () {
  query.value = {
    orderNo: '',
    riderName: '',
    userOrMerchantName: '',
    keyword: '',
    timeRange: 'all',
    star: '',
    fromRole: undefined
  }
}
/* 事件 */

function onReset () {
  Object.keys(query).forEach(k => (query[k] = ''))
  pageParams.pageNum = 1
  fetchOrderList()
}

/** 获取评价列表数据 */
async function fetchReviewList () {
  loading.value = true
  try {
    const params = {
      ...query,
      ...pageParams
    }
    const { rows, total: t } = await getReviewList(params)
    orderList.value = rows || []
    total.value = t ?? 0
  } catch (error) {
    console.error('获取评价列表失败：', error)
  } finally {
    loading.value = false
  }
}
onMounted(() => {
  fetchData()         // 组件一渲染就触发
})

/* ---------- 顶部“搜索”按钮 ---------- */
function onSearch () {
  pageNum.value = 1   // 重置到第一页
  fetchData()
}

/* ---------- “清除条件” ---------- */
function onReset () {
  Object.assign(query.value, {
    orderNo: '',
    riderName: '',
    userOrMerchantName: '',
    keyword: '',
    timeRange: 'all',
    star: '',
    fromRole: 1
  })
  pageNum.value = 1
  fetchData()
}

/* ---------- 分页组件回调 ---------- */
function handleSizeChange (size) {
  pageSize.value = size
  fetchData()
}

function handleCurrentChange (num) {
  pageNum.value = num
  fetchData()
}
</script>

<style scoped>
.review-filter { background: #fff; padding: 24px; border-radius: 8px; }
.filter-form   { margin-bottom: 16px; }
.filter-row    { display: flex; align-items: center; gap: 12px; }
.app-container {
  padding: 20px;
}

.review-filter {
  background: #fff;
  padding: 24px;
  border-radius: 8px;
}
.filter-form {
  margin-bottom: 16px;
}
.filter-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
</style>  